<docs>
# 树形表格功能
## 属性说明
- highlight-current-row //高亮当前行
- row-key="id"  // 渲染树形数据时，必须要指定 row-key
- default-expand-all //默认展开全部
- tree-props //指定渲染的字段
</docs>
<template>
  <div>
    <!-- 树形表格功能 -->
    <div class="flexTable">
      <el-table
        :data="tableData"
        highlight-current-row
        row-key="id"
        default-expand-all
        :tree-props="{children: 'child', hasChildren: 'hasChildren'}"
        style="width:100%;"
      >
        <el-table-column
          prop="name"
          label="菜单名称"
          min-width="40%"
          :filters="[{text: '权限管理', value: '权限管理'}, {text: '平台道具管理', value: '平台道具管理'}, {text: '平台充值管理', value: '平台充值管理'}]"
          :filter-method="filterHandler"
        ></el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" min-width="20%"></el-table-column>
        <el-table-column prop="createTime" label="是否有效" align="center" min-width="10%">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.valid"
              disabled
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="30%">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="primary"
              @click="handleAdd(scope.$index, scope.row)"
              icon="el-icon-plus"
            >新增子级</el-button>
            <el-button
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
              icon="el-icon-edit"
            >编辑</el-button>
            <el-button
              type="danger"
              size="small"
              @click="handleDel(scope.$index, scope.row)"
              icon="el-icon-delete"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // id显示隐藏
      idshow: false,
      listLoading: false,
      // 表格数据
      tableData: [
        {
          id: 29,
          name: "权限管理",
          createTime: "2020-10-20",
          valid: true
        },
        {
          id: 39,
          name: "平台道具管理",
          createTime: "2020-10-20",
          valid: false
        },
        {
          id: 40,
          name: "平台充值管理",
          createTime: "2020-10-20",
          valid: true,
          child: [
            {
              id: 41,
              fid: 40,
              name: "海外SDK",
              createTime: "2020-10-20",
              valid: false,
              child: [
                {
                  id: 41_1,
                  name: "海外SDK22222",
                  createTime: "2020-10-20",
                  valid: true
                }
              ]
            },
            {
              id: 42,
              name: "国内SDK",
              createTime: "2020-10-20",
              valid: true
            }
          ]
        }
      ]
    };
  },
  methods: {
    filterHandler(value, row, column) {
      console.log(value, row, column);
      const property = column["property"];
      return row[property] === value;
    },
    handleEdit() {},
    handleDel() {
      this.$confirm("确认删除该项目吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          console.log("成功");
        })
        .catch(() => {});
    },
    handleAdd() {}
  }
};
</script>

<style lang="scss" scoped>
@import "~assets/scss/var.scss";
</style>
